<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3Dmap</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        #container {
            width: 100%;
            height: 100vh;
        }

        #panel {
            position: absolute;
            top: 100px;
            right: 0;
            width: 450px;
            height: 550px;
            z-index: 999;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="panel"></div>
    </div>
</body>
<script>
    window.onload = function () {
        var map = new AMap.Map('container', {
            zoom: 11,       //级别(比列大小)
            viewMode: '2D',  //显示模式
            // center: [116.397428, 39.90923],  //中心点坐标
            // layers: [
            //     new AMap.TileLayer.Satellite(),
            //     new AMap.TileLayer.RoadNet()
            // ],
            // mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
        });
        AMap.plugin('AMap.ToolBar', function () {//异步加载插件
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar);
        });


        // 地图图块加载完成后触发
        // map.on('complete', function () {
        //     alert("地图加载完成");
        // })
        // 销毁地图，并清空地图容器
        // map.destroy();


        //实时路况图层
        // var trafficLayer = new AMap.TileLayer.Traffic({
        //     zIndex: 10
        // });
        // map.add(trafficLayer);

        // 点标记
        var p1 = [116.397428, 39.90923];//北京天安门
        var marker = new AMap.Marker({
            position: p1//位置
        })

        map.add(marker);//添加到地图
        // map.remove(marker) //移除点标记
        // 绑定事件
        marker.on("click", handleClick);
        // 信息窗体
        var infoWindow = new AMap.InfoWindow({
            content: '哈哈哈',
            offset: new AMap.Pixel(0, -30)
        });
        function handleClick(e) {
            infoWindow.setContent("我是天安门");
            infoWindow.open(map, e.target.getPosition());
        }


        var driving;
        function drivingRoute(start, end) {
            var startLngLat = start;
            var endLngLat = end;
            if (driving) {
                driving.clear();
            }
            driving = new AMap.Driving({
                // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                policy: AMap.DrivingPolicy.LEAST_TIME,
                // map 指定将路线规划方案绘制到对应的AMap.Map对象上
                map: map,
                // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
                panel: 'panel'
            })
            driving.search(startLngLat, endLngLat, function (status, result) {
                // 未出错时，result即是对应的路线规划方案
                console.log(status, result);
                if (status == "complete") {
                    console.log('路线规划成功');
                } else {
                    console.log('路线规划失败');
                }
            })
        }

        var arr = [];
        var markerArr = [];
        // 给map绑定点击事件
        map.on('click', function (e) {
            console.log(e);
            var p3 = e.lnglat;
            var marker = new AMap.Marker({
                position: p3//位置
            })
            map.add(marker);//添加到地图
            if (arr.length < 2) {
                arr.push(p3);
                markerArr.push(marker);
            } else {
                map.remove(markerArr[0]);
                arr.shift();
                arr.push(p3);
                markerArr.shift();
                markerArr.push(p3);

            }
            if (arr.length != 1) {
                // 行车路线插件
                AMap.plugin('AMap.Driving', drivingRoute.bind(null, arr[0], arr[1]));
            }

        })


        // 插件
        var p2;
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function (status, result) {
                if (status == 'complete') {
                    // console.log(result);

                    // 计算两点之间的距离
                    p2 = [result.position.lng, result.position.lat];
                    var distance = AMap.GeometryUtil.distance(p1, p2);
                    console.log(distance / 1000);
                } else {
                    alert("定位失败");
                }
            });
        });


    }





</script>
<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=8f4855068cfae4662821b3b06bc9d6b4"></script>

</html>